<template>
  <div>
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div class="logistics-status blue">
            <span v-if="orderInfo.logisticsStatus === 0">未发货</span>
            <span v-else-if="orderInfo.logisticsStatus === 1">已发货</span>
            <span v-else-if="orderInfo.logisticsStatus === 2">已签收</span>
            <span v-else-if="orderInfo.logisticsStatus === 3">未签收</span>
        </div>
        <div class="logistics-company">{{orderInfo.logisticsCompany}}</div>
        <div class="logistics-no">{{orderInfo.logisticsNo}}</div>
      </div>
    </div>
    <ul class="logistics-info-list">
      <li v-for="item in orderInfo.logisticsInfo" :key="item.time">
        <div class="logistics-info-list-time">{{item.time}}</div>
        <div class="logistics-info-list-content">{{item.content}}</div>
      </li>
    </ul>
    <button>查看物流详情</button>
  </div>
</template>
<script>
export default {
  props: {
    orderInfo: {
      type: Object,
    }
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
</style>
